﻿@model PortalCurriculo.MvcWebUI.Models.CargoModel
<script type="text/javascript">
    $(function () {
        $("#Areas").change(function () {
            //$("#erroPNE").hide();
            $.post("/Cargo/ListarEspecializacoesAreas", { idArea: $("#Areas").val() }, Area_Callback, "Json");
        });

        $("#EspecializacaoAreas").change(function () {
            //$("#erroPNE").hide();
            $.post("/Cargo/ListarCargos", { idEspecializacaoArea: $("#EspecializacaoAreas").val() }, EspecializacaoArea_Callback, "Json");
        });
    });

    function Area_Callback(partial) {
        var dropdown = $('#EspecializacaoAreas');
        dropdown.empty();

        var items = JSON.parse(partial.especializacoes);

        $.each(items, function (val, item) {
            dropdown.append(new Option(item.Descricao, item.Id));
        });

        dropdown[0].selectedIndex = 0;

        preencherCargos(partial.cargos);
    }

    function EspecializacaoArea_Callback(partial) {
        preencherCargos(JSON.parse(partial.cargos));
    }
    
    function preencherCargos(cargos) {
        var dropdown = $('#Cargos');
        dropdown.empty();

        $.each(cargos, function (val, item) {
            dropdown.append(new Option(item.Descricao, item.Id));
        });

        dropdown[0].selectedIndex = 0;
    }
</script>
<div class="editor-label">
    @Html.LabelFor(model => model.EspecializacaoArea.IdArea)
</div>
<div class="editor-field">
    @Html.DropDownList("Areas", (SelectList)ViewBag.EspecializacaoArea_IdArea, new { style = "width: 90%" })
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.IdEspecializacaoArea)
</div>
<div class="editor-field">
    @Html.DropDownList("EspecializacaoAreas", (SelectList)ViewBag.IdEspecializacaoArea, new { style = "width: 90%" })
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Id)
</div>
<div class="editor-field">
    @Html.DropDownList("Cargos", (SelectList)ViewBag.Cargos, new { style = "width: 90%" })
</div>
